<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var w = 31
        var mid = (w + 1) / 2
        var rowMax = (w+1)/2
        var triangle = ''
        for (var r = 1; r <= rowMax; r++) {
            var rowStr = ''
            for (var j = 1; j <= w; j++) {
                var c;
                if (j >= mid -(r-1) && j <= mid + (r-1)) {
                    c = '*'
                } else {
                    c = ' '
                }
                rowStr += c
            }
            triangle += rowStr
            triangle += '\n'
        }
        console.log(triangle)
        // var triangle2 = ''
        // for (var r = 1; r <= w; r++) {
        //     var rowStr = ''
        //     for (var col = 1; col <= r; col++) {
        //         rowStr += '*'
        //     }
        //     triangle2 += rowStr + '\n'
        // }
        // console.log(triangle2)


        // var num = 10

        // for (var r = 1; r <= num; r++) {
        //     var str = '';
        //     for (var i = 1; i <= r; i++) {
        //         // str += '*'
        //         str = str + '*'
        //     }
        //     console.log(str)
        // }
        // r=1 *
        // r=2 **
        // r=3 ***
    </script>
</body>

</html>